<template>
  <div class="main-box">
    <div class="table-box">
      <!--            <div class="area-search">-->
      <!--              <el-card>-->
      <!--                <el-form :model="searchForm" ref="searchForm">-->
      <!--                  <el-row :gutter="20">-->
      <!--                    <el-col :xs="10" :sm="10" :md="8" :lg="5" :xl="5">-->
      <!--                      <el-form-item label="院区名称:" prop="searchFormArea">-->
      <!--                        <el-select @change="buttonSearch" v-model="area" class="m-2" placeholder="请选择院区名称">-->
      <!--                          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />-->
      <!--                        </el-select>-->
      <!--                      </el-form-item>-->
      <!--                    </el-col>-->
      <!--                    &lt;!&ndash;              <el-col :span="8">&ndash;&gt;-->
      <!--                    &lt;!&ndash;                <el-button size="default" type="primary" class="ml10" @click="buttonSearch">&ndash;&gt;-->
      <!--                    &lt;!&ndash;                  <el-icon style="margin-right: 5px"><Search /></el-icon>&ndash;&gt;-->
      <!--                    &lt;!&ndash;                  搜索&ndash;&gt;-->
      <!--                    &lt;!&ndash;                </el-button>&ndash;&gt;-->
      <!--                    &lt;!&ndash;              </el-col>&ndash;&gt;-->
      <!--                  </el-row>-->
      <!--                </el-form>-->
      <!--              </el-card>-->
      <!--            </div>-->
      <ProTable
        ref="proTable"
        :row-key="row => row.tid"
        :indent="20"
        :columns="columns"
        :request-api="GetKeShiSel"
        :request-auto="false"
        :init-param="initParam"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
        :is-pageable="false"
        class="proTable_ls"
        @darg-sort="dargSort"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增科室</el-button>
        </template>
        <template #ShiFouKeYong="ShiFouKeYong">
          <el-tag type="success" v-if="ShiFouKeYong.row.ShiFouKeYong === '是'">启用</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
          <el-button type="primary" link :icon="EditPen" @click="openDrawerModuler('编辑', scope.row)">疾病模板</el-button>
          <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
        </template>
      </ProTable>
      <!--      <UserDrawer ref="drawerRef" />-->
      <!--      <ImportExcel ref="dialogRef" />-->
      <AreaDrawer ref="drawerRef" />
      <ModulerDrawer ref="ModuleDrawerRef" />
    </div>
  </div>
</template>

<script setup lang="tsx" name="DepartmentMaintenance">
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-expect-error
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-nocheck
import { onMounted, reactive, ref } from "vue";
import { User } from "@/api/interface";
import { genderType } from "@/utils/dict";
import { useHandleData } from "@/hooks/useHandleData";
// import { ElNotification } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
// import TreeFilter from "@/components/TreeFilter/index.vue";
// import ImportExcel from "@/components/ImportExcel/index.vue";
import UserDrawer from "@/views/proTable/components/UserDrawer.vue";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import AreaDrawer from "@/views/DataMaintenance/DepartmentMaintenance/components/AreaDrawer.vue";
import ModulerDrawer from "@/views/DataMaintenance/DepartmentMaintenance/components/ModulerDrawe.vue";
import {
  GetKeShiSel,
  PostKeShiAdd,
  PostKeShiUpdate,
  PostKeShiDel,
  GetKeShiZhongDaJiBingSel,
  PostTiaoZhengShunXu
} from "@/api/modules/departmentMaintenance";
import { GetAllYuanQuSel } from "@/api/modules/pulbic";

const area = ref();
onMounted(async () => {
  await getGetYuanQuSel();
  // await getTreeFilter();
});
const options = ref<any>([]);
const getGetYuanQuSel = () => {
  GetAllYuanQuSel().then(res => {
    res.Data.map((item: string) => {
      let objLs = {
        value: item,
        label: item
      };
      options.value.push(objLs);
      getTreeFilter();
    });
    area.value = options.value[0].value;
  });
};
const dargSort = async newIndex => {
  // console.log(newIndex, "newIndex");
  // console.log(area.value, "area"); //院区
  // 到达的位置
  // 科室的id
  await PostTiaoZhengShunXu(newIndex.removedItem.ShunXu, newIndex.newIndex + 1, newIndex.removedItem.KeShiID);
  await buttonSearch();
  // initParam.strYuanQuMingCheng = area.value;
  // await proTable.value?.getTableList();
};
// const searchForm = ref({
//   area: ""
// });
// ProTable 实例
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ strYuanQuMingCheng: "" });

// 获取 treeFilter 数据
// 当 proTable 的 requestAuto 属性为 false，不会自动请求表格数据，等待 treeFilter 数据回来之后，更改 initParam.departmentId 的值，才会触发请求 proTable 数据
// const treeFilterData = ref<any>([]);
// 先获取的是tree的数据然后拿的第一条获取的表格的数据的信息
const getTreeFilter = async () => {
  initParam.strYuanQuMingCheng = options.value[0].value;
};
const buttonSearch = () => {
  initParam.strYuanQuMingCheng = area.value;
  proTable.value?.getTableList();
};

const filterGenderEnum = ref<typeof genderType>([]);
// 表格配置项
const columns = reactive<ColumnProps<User.ResUserList>[]>([
  {
    label: "#",
    prop: "KeShiID",
    width: 80
    // type: "index"
  },
  {
    label: "循序",
    prop: "ShunXu",
    width: 80
    // type: "index"
  },
  {
    // 加上 sort 就获取不到当前行的数据
    type: "sort",
    label: "排序",
    prop: "tid",
    width: 80
  },
  { prop: "KeShiMingCheng", label: "科室名称", width: 160 },
  {
    prop: "KeShiLeiXing",
    label: "科室类型",
    width: 120,
    // sortable: true,
    isFilterEnum: false,
    enum: filterGenderEnum
    // search: {
    //   el: "select",
    //   props: { placeholder: "请输入性别查询", filterable: true, remote: true, reserveKeyword: true, loading, remoteMethod }
    // },
    // render: scope => <>{scope.row.gender === 1 ? "男" : "女"}</>
  },
  { prop: "PYM", label: "拼音码" },
  { prop: "BeiZhu1", label: "备注1" },
  { prop: "BeiZhu2", label: "备注2" },
  {
    prop: "ShiFouKeYong",
    label: "是否启用",
    // sortable: true,
    width: 120,
    tag: true,
    // enum: getUserStatus,
    // search: { el: "tree-select" },
    fieldNames: { label: "userLabel", value: "userStatus" }
  },
  { prop: "XianShiFangShi", label: "显示方式", width: 180 },
  { prop: "SuoShuYuanQu", label: "所属院区", width: 180 },
  { prop: "operation", label: "操作", width: 300, fixed: "right" }
]);

// 删除用户信息
const deleteAccount = async (params: User.ResUserList) => {
  console.log(params, "params");
  // await useHandleData(PostKeShiDel, params.tid, `删除【${params.KeShiMingCheng}】用户`);
  await useHandleData(PostKeShiDel, params.KeShiID, `删除【${params.KeShiMingCheng}】`);
  proTable.value?.getTableList();
};

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof UserDrawer> | null>(null);
const ModuleDrawerRef = ref<InstanceType<typeof UserDrawer> | null>(null);
const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
  console.log(title, row, "title, row");
  const params = {
    title,
    row: { ...row },
    isView: title === "查看",
    api: title === "新增" ? PostKeShiAdd : title === "编辑" ? PostKeShiUpdate : undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.hospitalLs(options.value, area.value);
  drawerRef.value?.acceptParams(params);
};

const openDrawerModuler = (title: string, row: Partial<User.ResUserList> = {}) => {
  const params = {
    title: "重大疾病模板",
    row: { ...row },
    isView: title === "查看",
    // api: title === "新增" ? GetKeShiZhongDaJiBingSel : title === "编辑" ? editUser : undefined,
    api: GetKeShiZhongDaJiBingSel,
    getTableList: proTable.value?.getTableList
  };
  ModuleDrawerRef.value?.acceptParams(params);
};
</script>

<style lang="scss" scoped>
.proTable_ls {
  margin-top: 10px;
}
.area-search {
  margin-bottom: 10px;
  :deep(.el-form-item--default) {
    margin-bottom: 0;
  }
}
</style>
